<p style="margin-bottom: 0px">&nbsp;</p>
<nz-card>
    <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-row [nzGutter]="8">
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="orderId">{{'orderId' | translate}}</nz-form-label>
                    <nz-form-control>
                        <input nz-input [(ngModel)]="q.orderId" name="orderId" id="orderId">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="user">{{'user' | translate}}</nz-form-label>
                    <nz-form-control>
                        <nz-input-group nzSearch [nzSuffix]="suffixButton">
                            <input type="text" [(ngModel)]="q.username" nz-input name="username">
                        </nz-input-group>
                        <ng-template #suffixButton>
                            <button (click)="showUserSelect()" nz-button nzType="default" nzSearch><i class="anticon anticon-ellipsis"></i></button>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-control>
                        <nz-range-picker name="cdate" [nzFormat]="dateFormat" [(ngModel)]="q.dateRange" (ngModelChange)="dateChange($event)"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
          <nz-col nzMd="4" nzSm="24" *ngIf="isManager">
            <nz-form-item>
              <nz-form-label nzFor="zname">订单状态</nz-form-label>
              <nz-select id="orderStatus" style="width: 160px;" [(ngModel)]="q.orderStatus" name="orderStatus">
                <nz-option [nzLabel]="'未完成'" [nzValue]="'unfinished'"></nz-option>
                <nz-option [nzLabel]="'已完成'" [nzValue]="'finished'"></nz-option>
              </nz-select>
            </nz-form-item>
          </nz-col>
          <nz-col nzMd="4" nzSm="24" *ngIf="isManager">
            <nz-form-item>
              <nz-form-label nzFor="zname">负责人</nz-form-label>
              <nz-select id="zname" style="width: 160px;" nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="q.zname" name="zname" [nzPlaceHolder]="'当前用户'">
                <nz-option [nzLabel]="zname.text" [nzValue]="zname.value" *ngFor="let zname of znames"></nz-option>
              </nz-select>
            </nz-form-item>
          </nz-col>
          <nz-col nzMd="4" nzSm="24">
              <button nz-button type="button" [nzType]="'primary'" (click)="st.load(1, q)">{{'search' | translate}}</button>
              <button nz-button type="button" [nzType]="'default'" (click)="export()"><i class="anticon anticon-export" *ngIf="isManager"></i>{{'export' | translate}}</button>
          </nz-col>
        </nz-row>
    </form>
</nz-card>

<simple-table #st
  [columns]="columns"
  [data]="url"
  [ps]="ps"
  [extraParams]="q"
  [resReName]="{ total: 'data.total', list: 'data.rows'}"
  [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
  toTopInChange
  [showTotal]="true"
  [showPagination]="true"
  [showSizeChanger]="true"
  (checkboxChange)="checkboxChange($event)">
  <ng-template st-row="brand" let-item let-index="index">
    {{item.brand | brandEnPipe | uppercase}}
  </ng-template>
  <ng-template st-row="clientName" let-item let-index="index">
    {{item.username}}-{{item.clientName}}
  </ng-template>
</simple-table>
